{% extends 'base.html' %}

{% block title %}实验记录 - 机械臂实验系统{% endblock %}

{% block extra_css %}
<style>
    .history-container {
        max-width: 900px;
        margin: 0 auto;
    }
    
    .experiment-card {
        margin-bottom: 1rem;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: transform 0.2s ease;
    }
    
    .experiment-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding: 12px 15px;
    }
    
    .status-badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        color: white;
    }
    
    .badge-pending {
        background-color: #6c757d;
    }
    
    .badge-in_progress {
        background-color: #17a2b8;
    }
    
    .badge-completed {
        background-color: #28a745;
    }
    
    .badge-failed {
        background-color: #dc3545;
    }
    
    .card-info {
        padding: 15px;
    }
    
    .info-item {
        margin-bottom: 5px;
        display: flex;
    }
    
    .info-label {
        width: 100px;
        color: #6c757d;
    }
    
    .info-value {
        flex: 1;
    }
    
    .empty-state {
        text-align: center;
        padding: 50px 0;
    }
    
    .empty-icon {
        font-size: 3rem;
        color: #dee2e6;
        margin-bottom: 1rem;
    }
    
    .delete-btn {
        color: #dc3545;
        cursor: pointer;
        margin-left: 10px;
    }
    
    .delete-btn:hover {
        color: #c82333;
    }
</style>
{% endblock %}

{% block content %}
<div class="history-container">
    <h2 class="mb-4">实验记录</h2>
    
    {% if experiments %}
        {% for experiment in experiments %}
            <div class="experiment-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-0">实验 #{{ experiment.id }}</h5>
                    </div>
                    <div>
                        <span class="status-badge badge-{{ experiment.status }}">
                            {{ experiment.get_status_display }}
                        </span>
                    </div>
                </div>
                <div class="card-info">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">开始时间:</div>
                                <div class="info-value">{{ experiment.start_time|date:"Y-m-d H:i:s" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">结束时间:</div>
                                <div class="info-value">
                                    {% if experiment.end_time %}
                                        {{ experiment.end_time|date:"Y-m-d H:i:s" }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">当前步骤:</div>
                                <div class="info-value">{{ experiment.get_current_step_display }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">是否成功:</div>
                                <div class="info-value">
                                    {% if experiment.success %}
                                        <span class="text-success"><i class="bi bi-check-circle-fill"></i> 成功</span>
                                    {% else %}
                                        {% if experiment.status == 'completed' %}
                                            <span class="text-danger"><i class="bi bi-x-circle-fill"></i> 失败</span>
                                        {% else %}
                                            <span class="text-secondary">未完成</span>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">备注:</div>
                                <div class="info-value">
                                    {% if experiment.notes %}
                                        {{ experiment.notes }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </div>
                            </div>
                            <div class="mt-2">
                                <a href="{% url 'experiment_detail' experiment.id %}" class="btn btn-sm btn-outline-primary">
                                    查看详情
                                </a>
                                {% if experiment.status == 'in_progress' %}
                                    <a href="{% url 'experiment_platform' %}" class="btn btn-sm btn-outline-success ms-2">
                                        继续实验
                                    </a>
                                {% endif %}
                                <button type="button" class="btn btn-sm btn-outline-danger ms-2" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#deleteModal" 
                                        data-experiment-id="{{ experiment.id }}">
                                    删除记录
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="empty-state">
            <div class="empty-icon">
                <i class="bi bi-clipboard-x"></i>
            </div>
            <h4>暂无实验记录</h4>
            <p class="text-muted">您还没有进行过任何实验，点击下方按钮开始您的第一次实验。</p>
            <a href="{% url 'experiment_platform' %}" class="btn btn-primary mt-2">
                开始实验
            </a>
        </div>
    {% endif %}
    
    <!-- 删除确认模态窗口 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除这条实验记录吗？此操作无法撤销。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <form id="deleteForm" method="post" action="">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-danger">确认删除</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加JavaScript代码处理删除操作 -->
{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有删除按钮
        const deleteButtons = document.querySelectorAll('[data-bs-target="#deleteModal"]');
        const deleteForm = document.getElementById('deleteForm');
        
        // 为每个删除按钮添加点击事件
        deleteButtons.forEach(button => {
            button.addEventListener('click', function() {
                const experimentId = this.getAttribute('data-experiment-id');
                // 设置删除表单的action，使用Django的URL反向解析
                deleteForm.action = "{% url 'experiment_delete' 0 %}".replace('0', experimentId);
            });
        });
    });
</script>
{% endblock %}
{% endblock %} 